<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '分享',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="share-container">
    <!-- 顶部返回按钮 -->
    <view class="back-button" @click="handleBack">
      <wd-icon name="arrow-left" size="22px"></wd-icon>
      <text class="back-text">分享</text>
    </view>

    <!-- 主要内容区域 -->
    <view class="share-content">
      <image src="/static/images/home/share/shareBg.png" class="share-bg-image" />
      <!-- 二维码区域 -->
      <view class="qrcode-section">
        <view class="qrcode-placeholder">
          <text class="qrcode-text">二维码区域</text>
        </view>
      </view>

      <!-- 底部按钮区域 -->
      <view class="button-section">
        <view class="copy-button" @click="handleCopyLink">
          <image src="/static/images/home/share/copy.png" class="copy-icon" />
          <text class="copy-text">复制链接</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 复制链接功能
const handleCopyLink = () => {
  // 这里应该是实际的分享链接
  const shareLink = 'https://example.com/share/invite'

  // 模拟复制到剪贴板
  // 在实际项目中，应该使用uni的API进行复制
  // uni.setClipboardData({
  //   data: shareLink,
  //   success: function() {
  //     uni.showToast({ title: '链接已复制', icon: 'success' });
  //   }
  // });

  console.log('复制链接:', shareLink)
  alert('链接已复制')
}

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
/* 全局样式 */
page {
  background-color: #0a0a1f;
  color: #ffffff;
}

/* 容器样式 */
.share-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a1f 0%, #1a1a3f 100%);
  position: relative;
  overflow: hidden;
}

/* 返回按钮 */
.back-button {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  color: #ffffff;
  font-size: 32rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  .back-icon {
    margin-right: 8rpx;
    font-size: 28rpx;
  }
}

/* 主要内容区域 */
.share-content {
  margin: 100rpx 50rpx;
  height: 75vh;
  position: relative;
  .share-bg-image {
    width: 100%;
    height: 100%;
  }
}

/* 二维码区域 */
.qrcode-section {
  width: 300rpx;
  height: 300rpx;
  position: absolute;
  bottom: 80rpx;
  left: 50%;
  margin-left: -150rpx;
  .qrcode-placeholder {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #333333;
    position: relative;
    z-index: 2;

    /* 二维码占位符边框 */
    border: 10rpx solid #ffffff;
  }

  /* 二维码装饰边框 */
  &::before {
    content: '';
    position: absolute;
    top: -20rpx;
    left: -20rpx;
    right: -20rpx;
    bottom: -20rpx;
    border: 2rpx solid rgba(0, 255, 255, 0.6);
    z-index: 1;
    animation: borderGlow 2s infinite alternate;
  }
}

/* 按钮区域 */
.button-section {
}

/* 复制链接按钮 */
.copy-button {
  position: relative;
  width: 230rpx;
  margin: 0 auto;
  margin-top: 50rpx;
  .copy-icon {
    width: 250rpx;
    height: 90rpx;
  }
  .copy-text {
    color: #00ffff;
    font-size: 35rpx;
    font-weight: bold;
    position: absolute;
    width: 250rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    top: 0;
    left: 0;
  }
}
</style>
